<template>
  <div class="strategyAdd">
    <div class="cjjTitle">修改 景点列表</div>
    <div class="detail">
      <div style="height: 70px;">
        <p class="inpBox">
          <span class="star">*</span>
          <span>景点名称：</span>
          <el-input class="inp" @blur="loseFcs" v-model="input" placeholder="请输入景点名称"></el-input>
        </p>
        <p v-show="isShow" class="tips">请输入你的景点名称</p>
      </div>
      <div class="uploadBox">
       <span><span class="star">*</span> 背景图</span><el-upload
  class="upload-demo"
  action=""
  :on-change='timeChangeUpload' 
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList1"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张不超过5M</div>
</el-upload>
      </div>
      <div class="timeBox">
        <span>
          <span class="star">*</span>时间组
        </span>
        <el-button
          class="timeBtn"
          icon="el-icon-plus"
          circle
          type="primary"
          @click="dialogTableVisible = true"
        ></el-button>

        <el-dialog :visible.sync="dialogTableVisible">
          <h2>修改 时间组</h2>
          <div class="selTime">
            <span>
              <span class="star">*</span>时间
            </span>
            <el-time-select
              v-model="value1"
              :picker-options="{
    start: '00:00',
    step: '00:30',
    end: '23:30'
  }"
              placeholder="00:00"
            ></el-time-select>
          </div>
          <div class="uploadBox">
            <span><span class="star">*</span> 背景图</span><el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change='timeChangeUpload' 
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList1"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张不超过5M</div>
</el-upload>
          </div>
          <div class="confirm">
            <el-button @click="timeUpdate" :class="btnStyle" :loading="isUpload" round>提交</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="dataBox">
				 <el-table
      :data="tableData"
      row-class-name="tableRowCjj"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="时间"
        width="200"
        >
      </el-table-column>
      <el-table-column
        prop="imgUrl"
        label="图片"
        width="400"
        >
        <template slot-scope="scope">
        	<img :src="baseUrl+scope.row.timeImg" alt="" />
        </template>
        
      </el-table-column>
      <el-table-column
      	width="300"
        prop="address"
        label="操作"
        >
      <template slot-scope="scope">
        <el-button
          round
          size="mini"
          @click="timeHandleEdit"><i class="el-icon-edit"></i></el-button>
        <el-button
          :data-id="scope.row.id"
       	  round
          size="mini"
          type="danger"
          @click="timeDeleteRow(scope.row.id)"><i class="el-icon-delete"></i></el-button>
      </template>
      </el-table-column>
    </el-table>
			</div>
      <div class="postBtn">
        <el-button @click="upLoad" :class="btnStyle" :loading="isUpload" round>{{btnName}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/assets/js/config.js"
export default {

  name: 'appointment',
  components: {
  },
  data () {
    return {
      tableData: [],
        dialogTableVisible: false,
        btnName:"立即提交",
        btnStyle:"primary",
        value1: '',
        input: '',
		isShow: false,
		isUpload:false,
		token:'',
		fileList:[],
		bgImg:'',
		baseUrl:config.baseUrl,
		fileList1:[],
		timeImg:'',
		timeImgArr:[]
    }
  },
  created () {
    this.getData();
  },
  methods: {
		timeChangeUpload(file, fileList){
   			console.log(file,fileList);
			var formData = new FormData();
				formData.append("files",file.raw);
				this.$submit.post(config.upImg,formData).then(res=>{
					console.log(res);
					var imgUrl = {};
					imgUrl = [{url:this.baseUrl+res.data.data.img_url}];
					console.log(imgUrl);
					this.fileList1 = imgUrl;
					this.timeImg = res.data.data.img_url;
					this.timeImgArr.push(res.data.data.img_url);
					console.log(this.timeImgArr);
				}).catch(function(err){
					console.log("fail");
				})
			 },
			 timeUpdate(){
					this.$submit.post(config.updateStrategyTime,{
					img_url:this.timeImg,
					time_string:this.value1
				}).then((res)=>{
					console.log(res);
					var tableObj = {};
					tableObj.date = this.value1;
					tableObj.timeImg = this.timeImg;
					this.tableData.push(tableObj);
					console.log(this.tableData);
					this.dialogTableVisible = false;
					this.timeImg = '';
					this.fileList1=[];
					this.value1 = "";
				}).catch(function(err){
					console.log("fail");
				})
			 },
			changeUpload(file, fileList){
			console.log(file,fileList);
			var formData = new FormData();
				formData.append("files",file.raw);
				this.$submit.post(config.upImg,formData).then(res=>{
					console.log(res);
					var imgUrl = {};
					imgUrl = [{url:this.baseUrl+res.data.data.img_url}];
					console.log(imgUrl);
					this.fileList = imgUrl;
					this.bgImg = res.data.data.img_url;
					console.log(this.bgImg);
				}).catch(function(err){
					console.log("fail");
				})
   		},
    getData () {
      console.log(this.$route.query.id);
      console.log(config.findStrategy);
      this.$require.get(config.findStrategy, {
        params: {
          id: this.$route.query.id
        }
      }).then((res) => {
        console.log(res);
        this.input = res.data.data.name;
				this.tableData = res.data.data.time_id_array;
				this.bgImg=res.data.data.background_url.slice(26);
      }).catch(function (err) {
        console.log("fail");
      })
    },
    timeRemove () {

    },
    loseFcs () {
      if (this.input == '') {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
		},
		upLoad(){
			this.$submit.post(config.addStrategy,{
				bg_url:this.bgImg,
				id:this.$route.query.id,
				name:this.input,
				time_id_array:",,"
			}).then((res)=>{
				console.log(res);
				 this.$router.push({
        			name:'strategy'
        		})  
			}).catch(function(err){
				console.log("fail");
			})
		}
  }
}
</script>

<style lang="scss" scoped="scoped">
.strategyAdd {
  min-width: 1200px;
  height: 100%;
	overflow: auto;
  margin-top: 5px;
  text-align: left;
  box-sizing: border-box;
  padding-left: 25px;
  .cjjTitle {
    font-size: 36px;
    font-weight: bold;
  }
  .detail {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    box-sizing: border-box;
    padding-left: 30px;
    .uploadBox {
      .star {
        color: red;
      }
      span {
        display: inline-block;
        padding-bottom: 5px;
      }
    }
    .inpBox {
      display: flex;
      align-items: center;
      .star {
        color: red;
        padding-right: 5px;
      }
      span {
        white-space: nowrap;
      }
      .inp {
        .el-input__inner {
          border-radius: 10px;
          outline: none;
          font-size: 14px;
        }
      }
    }
    .tips {
      font-size: 12px;
      margin-top: 5px;
      padding-left: 50px;
      color: red;
    }
    .postBtn {
      margin-top: 20px;
      .primary {
        background: #006699;
        color: white;
      }
      .primary:hover {
        color: #ccffff;
        background: #333399;
      }
      .success {
        background: #99cc00;
        color: #ccffcc;
      }
    }
    .timeBox {
      margin-top: 20px;
      box-sizing: border-box;
      .star {
        color: red;
      }
      span {
        display: inline-block;
        padding-bottom: 5px;
        padding-right: 5px;
      }

      .timeBtn:hover {
        background: #87ceeb;
      }
      .uploadBox {
        margin-top: 5px;
        .star {
          color: red;
        }
        span {
          display: inline-block;
          padding-bottom: 5px;
        }
      }
      .selTime {
        margin-top: 10px;
      }
      .confirm {
        margin-top: 20px;
        .primary {
          background: #006699;
          color: white;
        }
        .primary:hover {
          color: #ccffff;
          background: #333399;
        }
        .success {
          background: #99cc00;
          color: #ccffcc;
        }
      }
    }
    .dataBox {
			margin-top: 5px;
			img{
				width:100px;
			}
    }
    .postBtn {
      margin-top: 20px;
      .primary {
        background: #006699;
        color: white;
      }
      .primary:hover {
        color: #ccffff;
        background: #333399;
      }
      .success {
        background: #99cc00;
        color: #ccffcc;
      }
    }
  }
}
</style>